<div class="gutter-example">
  <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 8, xl: 8, xxl: 8 }">
    <div nz-col class="gutter-row" nzSpan="6">
      <div class="gutter-box">
        <div nz-row>
          <div nz-col [nzSpan]="6">
            <img src="../../../../../assets/imgs/line-bar.png" alt="" width="120px">
          </div>
          <div nz-col [nzSpan]="18" class="font-text">
            <div>497</div>
            <div style="font-size:14px">Portfolio Vulnerabilities</div>
          </div>
        </div>
      </div>
    </div>
    <div nz-col class="gutter-row" nzSpan="6">
      <div class="gutter-box">
        <div nz-row>
          <div nz-col [nzSpan]="8" style="text-align: center;">
            <img src="../../../../../assets/imgs/temperature.png" alt="" width="100px">
          </div>
          <div nz-col [nzSpan]="1">
            <nz-divider nzType="vertical" class="divider"></nz-divider>
          </div>
          <div nz-col [nzSpan]="15" class="font-text">
            <div>1</div>
            <div style="font-size:14px">Projects at Risk</div>
          </div>
        </div>
      </div>
    </div>
    <div nz-col class="gutter-row" nzSpan="6">
      <div class="gutter-box">
        <div nz-row>
          <div nz-col [nzSpan]="10" style="text-align: center;">
            <img src="../../../../../assets/imgs/radar.png" alt="" width="100px">
          </div>
          <div nz-col [nzSpan]="14" style="padding: 8px 0;">
            <ul>
              <li><span class="small_circle"></span> 严重：13</li>
              <li><span class="small_circle"></span> 高：146</li>
              <li><span class="small_circle"></span> 中：41</li>
              <li><span class="small_circle"></span> 低：56</li>
            </ul>
          </div>
        </div>

      </div>
    </div>
    <div nz-col class="gutter-row" nzSpan="6">
      <div class="gutter-box">
        <div echarts [options]="gaugeOption" class="bar-option"></div>
      </div>
    </div>
  </div>
</div>


<div style="text-align: right;margin-top:10px;">
  <button nz-button nzType="primary" (click)="showModal()"><i nz-icon type="search"></i>定位</button>
</div>

<nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent"
  [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
  <ng-template #modalTitle>
    资源定位
  </ng-template>
  <ng-template #modalContent>
    <div>
      <div><span class="star">*</span>&nbsp;&nbsp;组件名称</div>
      <div class="location-margin">
        <input nz-input [(ngModel)]="name" id="name" name="name" placeholder="输入组件名称">
      </div>

    </div>
    <div>
      <div><span class="star">*</span>&nbsp;&nbsp;类型</div>
      <div class="location-margin">
        <nz-radio-group [(ngModel)]="radioValue">
          <label nz-radio nzValue="A">A</label>
          <label nz-radio nzValue="B">B</label>
          <label nz-radio nzValue="C">C</label>
          <label nz-radio nzValue="D">D</label>
        </nz-radio-group>
      </div>
    </div>
    <p>some contents...</p>
  </ng-template>
  <ng-template #modalFooter>
    <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
    <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button>
  </ng-template>
</nz-modal>

<div class="custom_table">
  <nz-table #ajaxTable nzShowSizeChanger [nzFrontPagination]="false" [nzData]="dataSet" [nzLoading]="loading" [nzTotal]="total"
    [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" (nzPageIndexChange)="searchData()" (nzCurrentPageDataChange)="currentPageDataChange($event)"
    (nzPageSizeChange)="searchData(true)">
    <thead (nzSortChange)="sort($event)" nzSingleSort>
      <tr>
        <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="checkAll($event)"></th>
        <th nzShowSort nzSortKey="name">Name</th>
        <th nzShowFilter [nzFilters]="filterGender" (nzFilterChange)="updateFilter($event)">Gender</th>
        <th nzShowSort nzSortKey="email"><span>Email</span></th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of ajaxTable.data">
        <td nzShowCheckbox [(nzChecked)]="data.checked"></td>
        <td>{{data.name.first}} {{data.name.last}}</td>
        <td>{{data.gender}}</td>
        <td>{{data.email}}</td>
      </tr>
    </tbody>
  </nz-table>
</div>
